<template>
  <div class="box">
    <div class="topBox">
      <div class="titleBox">
        <div class="title">
          <img src="https://assets-cdn.lanqb.com/onschd23/c1-img01.png" class="chmh1-img01 animated fadeInLeft">
          <img src="https://assets-cdn.lanqb.com/onschd23/c1-h1.png" class="chmh1-h1 animated fadeInDown">
          <img src="https://assets-cdn.lanqb.com/onschd23/c1-h2.png?0415" class="chmh1-h2 animated fadeInUp" >
          <div></div>
          <div class="chmh1-con1-teach">
                        <img src="https://assets-cdn.lanqb.com/onschd23/c1-h3.png" class="chmh1-h3 animated fadeInUp">
                        <img src="https://assets-cdn.lanqb.com/onschd23/c1-avatar01.png" class=" animated zoomIn">
                        <img src="https://assets-cdn.lanqb.com/onschd23/c1-avatar02.png" class=" animated zoomIn">
          </div>
          <!-- <h4 class="animated fadeInUp">目前已有<span class="interest_number">952556</span>人对课程感兴趣!</h4> -->
          <button class="btn  animated fadeInUp">立即咨询</button>
        </div>
        <img src="https://assets-cdn.lanqb.com/onschd23/c1-img03.png" class="chmh1-img03 animated fadeInRight">
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.box {
  max-width: 1920px;
  margin-right: auto;
  margin-left: auto;
}
.topBox {
  height: 600px;
background-image: url(https://assets-cdn.lanqb.com/onschd23/c1-bg.png);
  background-repeat: no-repeat;
  background-position: 50% 0;
    position: relative;
}
.titleBox {
  width: 1180px;
  height: 100%;
  margin: 0 auto;
}
.title{
    position: relative;
    width: 944px;
    height: 419px;
    top: 93px;
    left: 0;
    background-image: url(https://assets-cdn.lanqb.com/onschd23/c1-img02.png);
    background-position: top;
    text-align: center;
    img{
      border: 0;
      vertical-align: middle;
    }
}
.chmh1-img01{
  position: absolute;
    left: -35px;
    top: -57px;
}
.chmh1-h1{
  margin-top: -37px;

}
.chmh1-img03{
      position: absolute;
      // display: block;
    right: 0px;
    top: 0;
    overflow: hidden;
}

.chmh1-con1-teach{
  position: relative;
    display: inline-block;
    margin-top: 20px;
    width: 426px;
    height: 124px;
    border-width: 0 3px 3px;
    border-style: solid;
    border-color: #262432;
    img{
      margin: 5px 25px 0;
    }
}
.chmh1-h3 {
margin-top: -20px !important;
}
.btn{
  width: 230px;
  height: 57px;
  margin: 0 auto;
  margin-top: 20px;
  border: 3px solid #000;
  background-color: #fdc010;
  font-size: 24px;
  line-height: 38px;
  display: block;
  padding: 0;
}

.fadeInLeft {
  animation-name: fadeInLeft;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%,0,0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}
.fadeInRight {
  animation-name: fadeInRight;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%,0,0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}
.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0,-100%,0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}
.fadeInDown {
  animation-name: fadeInDown;
}
.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0,100%,0);
  }
  to {
    opacity: 1;
    transform: translateZ(0);
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
</style>